<template>
	<view id="mapContainer" class="map-container-panel" :prop="sender" :change:prop="handleAction"></view>
</template>

<script module="leaflet" lang="renderjs">
	// 引入leaflet的css样式
	import '@/static/js/leaflet/leaflet.css';
	// 引入leaflet的js文件
	import L from '@/static/js/leaflet/leaflet';
	// 引入leaflet的中文地图服务
	import '@/static/js/leaflet/leaflet.ChineseTmsProviders.js';
	// 引入leaflet的地图纠偏插件
	import '@/static/js/leaflet/leaflet.mapCorrection.js';
	// 引入leaflet的terraformer插件
	import '@/static/js/leaflet/terraformer';
	// 引入terraformer-wkt-parser插件
	import Terraformer from '@/static/js/leaflet/terraformer-wkt-parser';

	export default {
		data() {
			return {
				// 地图实例
				map: null,
				// 经度
				lgtd: 111.494811,
				// 纬度
				lttd: 32.556211,
				// 缩放级别
				zoom: 12,
				// 地图拥有者实例
				ownerInstance: {},
				// 图层
				layers: [],
				// 基础图层
				baseLayers: [],
				// leafletId
				leafletId: null,
				// 业务图层组
				businessLayerGroup: {},
				// 设置
				settings: {
					// 天地图的key
					TianDiTuKey: '4c9c8a818d3cb25bf5ccbd749e7e67c8', //这里需要替换成自己的KEY
				},
				// 圆形图层
				circleLayer: null,
			}
		},
		computed: {},
		mounted() {
			// 创建地图
			this.handleCreate()
		},
		methods: {
			// 处理action
			handleAction(newValue, oldValue, ownerInstance, instance) {
				this.ownerInstance = ownerInstance
				var handle = this[newValue.handle]
				var latlng = newValue.latlng
				var options = newValue.options
				var callback = newValue.callback
				var param = newValue.param
				if (!options) {
					options = undefined
				}
				if (!handle) {
					console.info('参数为标记需要执行的方法')
					return
				}
				//同时执行两次操作的时必须延迟执行否则数据变化太快导致没反应 
				this.handleExecute(handle, latlng, options, callback, param)
			},
			// 执行action
			handleExecute(handle, latlng, options, callback, param) {
				var layer = handle(latlng, options, callback)
				if (!layer) {
					return
				}
				if (options && options.popup) {
					layer.bindPopup(options.popup)
				}
				if (!callback) {
					return
				}
				layer.on('click', () => {
					this.ownerInstance.callMethod('handleItemClick', {
						callback,
						param
					})
				})
			},
			// 创建地图
			handleCreate(options) {
				const parentH = document.getElementById("mapContainer").parentNode.clientHeight;
				document.getElementById("mapContainer").style.height = parentH + 'px';
				this.map = L.map('mapContainer', {
					attributionControl: false,
					zoomControl: false,
					detectRetina: true,
					minZoom: 5,
					maxZoom: 18
				});
				L.control.scale({
					position: `bottomright`,
					imperial: false
				}).addTo(this.map);
				this.map.on('load', () => {
					console.log('map load...');
					const layer = this.handleInitializeLayer();
					layer.addTo(this.map);
					this.leafletId = layer._leaflet_id;
					// this.handleCreateLayerControl();
					this.$ownerInstance.callMethod('handleOnLoad', {
						leafletId: this.leafletId
					})
				}).setView([this.lttd, this.lgtd], this.zoom);

				this.map.on('moveend', () => {
					this.getCenter();
				});
				// this.map.on('zoomend', () => {
				// 	this.getZoom();
				// });
			},
			// 初始化图层
			handleInitializeLayer() {
				const maxZoom = 19;
				const minZoom = 5;
				const subdomains = [`0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`];

				// 天地图-矢量
				var tiandiMap = L.layerGroup([L.tileLayer(
					`https://t{s}.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${this.settings.TianDiTuKey}`, {
						maxZoom,
						minZoom,
						subdomains
					}), L.tileLayer(
					`https://t{s}.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${this.setTianDiTuKeyuKeyuKeyuKey}`, {
						maxZoom,
						minZoom,
						subdomains
					})]);

				// 天地图-影像
				var tiandiSatellite = L.layerGroup([L.tileLayer(
					`https://t{s}.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${thTianDiTuKeyiTuKeyiTuKeyiTuKey}`, {
						maxZoom,
						minZoom,
						subdomains
					}), L.tileLayer(
					`https://t{s}.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tTianDiTuKeynDiTuKeynDiTuKeynDiTuKey}`, {
						maxZoom,
						minZoom,
						subdomains
					})]);

				// 天地图-地形
				var tiandiTerrain = L.layerGroup([L.tileLayer(
					`https://t{s}.tianditu.gov.cn/ter_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ter&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOLTianDiTuKeyianDiTuKeyianDiTuKeyianDiTuKey}`, {
						maxZoom,
						minZoom,
						subdomains
					}), L.tileLayer(
					`https://t{s}.tianditu.gov.cn/cta_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cta&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TTianDiTuKey}TianDiTuKeysTianDiTuKey.TianDiTuKey}`, {
						maxZoom,
						minZoom,
						subdomains
					})]);

				this.baseLayers.push({
					id: 1,
					label: '天地图矢量',
					layer: tiandiMap
				})
				this.baseLayers.push({
					id: 2,
					label: '天地图影像',
					layer: tiandiSatellite
				})
				this.baseLayers.push({
					id: 3,
					label: '天地图山地',
					layer: tiandiTerrain
				})

				return tiandiSatellite
			},
			// 创建图层控件
			handleCreateLayerControl() {
				const obj = {}
				for (var i = 0; i < this.baseLayers.length; i++) {
					var item = this.baseLayers[i]
					obj[item.label] = item.layer
				}
				const control = L.control.layers(obj)
				control.addTo(this.map)
			},
			// 标记
			marker(latlng, options) {
				const marker = L.marker(latlng, options)
				marker.addTo(this.map)
				if (options && options.popup) {
					marker.bindPopup(options.popup)
				}
				this.layers.push(marker)
				return marker
			},
			// 折线
			polyline(latlngs, options) {
				var polyline = L.polyline(latlngs, options)
				polyline.addTo(this.map)
				if (options && options.popup) {
					polyline.bindPopup(options.popup)
				}
				this.layers.push(polyline)
				return polyline
			},
			// 多边形
			polygon(latlngs, options) {
				var polygon = L.polygon(latlngs, options)
				polygon.addTo(this.map)
				if (options && options.popup) {
					polygon.bindPopup(options.popup)
				}
				this.layers.push(polygon)
				return polygon
			},
			// 圆形
			circle(latlng, options) {
				var circle = L.circle(latlng, options)
				circle.addTo(this.map)
				if (options && options.popup) {
					circle.bindPopup(options.popup)
				}
				this.layers.push(circle)
				return circle
			},
			// WMS图层
			lsyerWMS(baseUrl, options) {
				var layer = L.tileLayer.wms(baseUrl, options)
				layer.addTo(this.map)
				this.layers.push(layer)
				return layer
			},
			// geoJson图层
			geoJson(geojson, options) {
				var json = geojson
				if (typeof(geojson) == 'string') {
					json = Terraformer.parse(geojson)
				}
				var layer = L.geoJSON(json, options)
				layer.addTo(this.map)
				if (options && options.popup) {
					layer.bindPopup(options.popup)
				}
				this.layers.push(layer)
				return layer
			},
			// 瓦片图层组
			tileLayerGroup(latlng, options) {
				this.clearLayerGroup(options.layerGroupName);
				const layers = [];
				(latlng || []).forEach((item) => {
					layers.push(L.tileLayer(item.url, item.options));
				});
				const layerGroup = L.layerGroup(layers).addTo(this.map);
				if (options.layerGroupName) {
					this.businessLayerGroup[options.layerGroupName] = layerGroup;
				}
				return layerGroup;
			},
			// 标记图层组
			markerLayerGroup(latlng, options) {
				this.clearLayerGroup(options.layerGroupName);
				const layers = [];
				(latlng || []).forEach((item, index) => {
					const marker = L.marker(item.latlng, {
						icon: L.divIcon(item.icon)
					});
					if (item.popInfo) {
						marker.bindPopup(item.popInfo.content, item.popInfo.options || {
							offset: [0, -25],
							maxWidth: 300
						});
					}
					marker.on(`click`, () => {
						this.$ownerInstance.callMethod('handleClickMarker', {
							action: `marker`,
							data: item
						})
					});
					layers.push(marker);
				});
				const clusterOptions = {
					disableClusteringAtZoom: 15,
					maxClusterRadius: 100,
					removeOutsideVisibleBounds: true,
					chunkedLoading: true,
					showCoverageOnHover: true
				};
				const layerGroup = L.markerClusterGroup(clusterOptions);
				layerGroup.addLayers(layers);
				this.map.addLayer(layerGroup);
				if (options.layerGroupName) {
					this.businessLayerGroup[options.layerGroupName] = layerGroup;
				}
				return layerGroup;
			},
			// 折线图层组
			polylineLayerGroup(latlng, options) {
				this.clearLayerGroup(options.layerGroupName);
				const layers = [];
				(latlng || []).forEach((item = {}) => {
					const polyline = L.polyline(item.latlngs, item.options);
					layers.push(polyline);
				});
				const layerGroup = L.layerGroup(layers).setZIndex(104).addTo(this.map);
				if (options.layerGroupName) {
					this.businessLayerGroup[options.layerGroupName] = layerGroup;
				}
			},
			// 多边形图层组
			polygonLayerGroup(latlng, options) {
				this.clearLayerGroup(options.layerGroupName);
				const layers = [];
				(latlng || []).forEach((item = {}) => {
					const polygon = L.polygon(item.latlngs, item.options);
					layers.push(polygon);
				});
				const layerGroup = L.layerGroup(layers).setZIndex(104).addTo(this.map);
				if (options.layerGroupName) {
					this.businessLayerGroup[options.layerGroupName] = layerGroup;
				}
			},
			// 圆形图层组
			circleLayerGroup(latlng, options) {
				this.clearLayerGroup(options.layerGroupName);
				const layers = [];
				(latlng || []).forEach((item = {}) => {
					const circle = L.circle(item.latlngs, item.options);
					layers.push(circle);
				});
				const layerGroup = L.layerGroup(layers).setZIndex(104).addTo(this.map);
				if (options.layerGroupName) {
					this.businessLayerGroup[options.layerGroupName] = layerGroup;
				}
			},
			// 图形图层组
			graphicalLayerGroup(latlng) {
				const layers = [];
				(latlng || []).forEach((item = {}) => {
					if (item.type === `marker`) {
						this.markerLayerGroup(item.dataList, item.options);
					} else if (item.type === `polyline`) {
						this.polylineLayerGroup(item.dataList, item.options);
					} else if (item.type === `polygon`) {
						this.polygonLayerGroup(item.dataList, item.options);
					} else if (item.type === `circle`) {
						this.circleLayerGroup(item.dataList, item.options);
					}
				});
			},
			// 切换基础图层
			changeBaseLayer(latlng) {
				const layerInfo = this.baseLayers.find((item = {}) => {
					return item.id === latlng.code;
				}) || {};
				if (layerInfo.id) {
					this.map.eachLayer(layer => {
						if (layer._leaflet_id === this.leafletId) {
							layer.remove();
						}
					});
					layerInfo.layer.addTo(this.map);
					this.leafletId = layerInfo.layer._leaflet_id;
				}
			},
			// 平移到指定位置
			panTo(latlng, options) {
				this.map.panTo(latlng, options)
			},
			// 飞到指定位置
			flyTo(latlng, options) {
				this.map.flyTo(L.latLng(latlng.lttd, latlng.lgtd), options)
			},
			// 调整视野到指定范围
			fitBounds(latlng, options) {
				this.map.fitBounds(latlng, Object.assign({
					padding: L.point(30, 30)
				}, options));
			},
			// 飞到指定范围
			flyBounds(latlng, options) {
				this.map.flyToBounds(latlng, Object.assign({
					padding: L.point(30, 30)
				}, options));
			},
			// 设置缩放级别
			setZoom(zoom, options) {
				this.map.setZoom(zoom, options)
			},
			// 放大
			zoomIn() {
				this.map.zoomIn();
			},
			// 缩小
			zoomOut() {
				this.map.zoomOut();
			},
			// 获取缩放级别
			getZoom() {
				const zoom = this.map.getZoom();
				this.$ownerInstance.callMethod('handleSetZoom', {
					zoom
				});
			},
			// 获取中心点
			getCenter() {
				const center = this.map.getCenter();
				this.$ownerInstance.callMethod('handleSetCenter', {
					center
				});
			},
			// 定位到指定位置
			aim(latlng, zoom) {
				if (typeof(this.map.panTo) === `function` && typeof latlng === 'object') {
					this.map.flyTo(L.latLng(latlng.lttd, latlng.lgtd), zoom);
					// this.map.setView(L.latLng(latlng.lttd, latlng.lgtd), zoom);
					// this.map.panTo(L.latLng(latlng.lttd, latlng.lgtd)).setZoom(zoom);
				}
			},
			// 移除所有图层
			removeAll() {
				for (var i = 0; i < this.layers.length; i++) {
					var item = this.layers[i]
					item.remove()
				}
				this.layers = new Array()
			},
			// 清除图层组
			clearLayerGroup(latlng) {
				const layerGroup = this.businessLayerGroup[latlng];
				if (typeof((layerGroup || {}).clearLayers) === `function`) {
					layerGroup.clearLayers();
				}
			},
			// 清除所有图层组
			clearAllLayerGroup() {
				// 遍历businessLayerGroup对象
				for (const key in this.businessLayerGroup) {
					// 判断对象是否拥有该属性
					if (Object.hasOwnProperty.call(this.businessLayerGroup, key)) {
						// 获取图层组
						const layerGroup = this.businessLayerGroup[key];
						// 判断图层组是否有clearLayers方法
						if (typeof((layerGroup || {}).clearLayers) === `function`) {
							// 调用clearLayers方法
							layerGroup.clearLayers();
						}
					}
				}
			},
			// 获取客户端高度
			getClientHeight() {
				var clientHeight = 0;
				// 判断document.body和document.documentElement的高度
				if (document.body.clientHeight && document.documentElement.clientHeight) {
					// 取两者中较小的值
					var clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body
						.clientHeight : document.documentElement.clientHeight;
				} else {
					// 取两者中较大的值
					var clientHeight = (document.body.clientHeight > document.documentElement.clientHeight) ? document.body
						.clientHeight : document.documentElement.clientHeight;
				}
				// 返回客户端高度
				return clientHeight;
			}
		}
	}
</script>

<script>
	import bus from '@/static/js/bus.js';
	export default {
		props: {
			// 传入的选项对象
			options: {
				type: Object,
				default: () => ({})
			}
		},
		data() {
			return {
				// 发送者对象
				sender: {
					// 处理函数
					handle: '',
					// 经纬度
					latlng: {},
					// 选项
					options: null,
					// 回调函数
					callback: null,
					// 参数
					param: null,
					// 时间戳
					timeStamp: (new Date()).getTime()
				},
				// 高度
				height: 800,
				// leafletId
				leafletId: null
			}
		},
		mounted() {
			// 延迟500毫秒后获取系统信息
			setTimeout(() => {
				uni.getSystemInfo({
					success(res) {
						// 获取屏幕高度减去状态栏高度
						this.height = res.screenHeight - res.statusBarHeight;
					}
				});
			}, 500);
		},
		methods: {
			// 处理加载事件
			handleOnLoad(info = {}) {
				// 将传入的leafletId赋值给this.leafletId
				this.leafletId = info.leafletId;
				// 触发on-load事件
				this.$emit('on-load');
			},
			// 处理标记事件
			handleMarker(latlng, options, callback, param) {
				// 如果options是字符串，则将callback赋值给param，将options赋值给callback，将undefined赋值给options
				if (typeof options == 'string') {
					param = callback
					callback = options
					options = undefined
				}
				// 将传入的参数赋值给this.sender
				this.sender = {
					handle: 'marker',
					latlng: latlng,
					options: options,
					callback,
					param
				}
			},
			// 处理点击事件
			handleItemClick(event) {
				// #ifdef H5
				// 在H5环境下，获取父组件的父组件的event.callback方法
				var handle = this.$parent.$parent[event.callback]
				//#endif
				// #ifdef APP-PLUS
				// 在APP-PLUS环境下，获取父组件的event.callback方法
				var handle = this.$parent[event.callback]
				//#endif
				// 如果handle存在，则执行handle方法
				if (handle) {
					handle(event.param)
				}
			},
			// 处理设置中心事件
			handleSetCenter(event) {
				// 定义回调函数
				const callback = `setCenter`;
				// #ifdef H5
				// 在H5环境下，获取父组件的父组件的父组件的父组件的callback方法
				var handle = this.$parent.$parent.$parent.$parent[callback]
				//#endif
				// #ifdef APP-PLUS
				// 在APP-PLUS环境下，获取父组件的父组件的callback方法
				var handle = this.$parent.$parent[callback]
				//#endif
				// 如果handle存在，则执行handle方法
				if (handle) {
					handle(event.center)
				}
			},
			// 处理设置缩放事件
			handleSetZoom(event) {
				// 定义回调函数
				const callback = `setZoom`;
				// #ifdef H5
				var handle = this.$parent.$parent.$parent.$parent[callback]
				//#endif
				// #ifdef APP-PLUS
				var handle = this.$parent.$parent[callback]
				//#endif
				if (handle) {
					handle(event.zoom)
				}
			},
			// 处理折线
			handlePolyline(latlngs, options, callback, param) {
				// 如果options是字符串类型，则将param赋值给callback，将callback赋值给options，将options赋值为undefined
				if (typeof options == 'string') {
					param = callback
					callback = options
					options = undefined
				}
				// 将sender的handle赋值为'polyline'
				this.sender.handle = 'polyline'
				// 将sender的latlng赋值为latlngs
				this.sender.latlng = latlngs
				// 将sender的options赋值为options
				this.sender.options = options
				// 将sender的callback赋值为callback
				this.sender.callback = callback
				// 将sender的param赋值为param
				this.sender.param = param
			},
			// 处理WMS图层
			handleLsyerWMS(baseUrl, options, callback, param) {
				// 如果options是字符串类型，则将param赋值给callback，将callback赋值给options，将options赋值为undefined
				if (typeof options == 'string') {
					param = callback
					callback = options
					options = undefined
				}
				// 将sender的handle赋值为'lsyerWMS'
				this.sender.handle = 'lsyerWMS'
				// 将sender的latlng赋值为baseUrl
				this.sender.latlng = baseUrl
				// 将sender的options赋值为options
				this.sender.options = options
				// 将sender的callback赋值为callback
				this.sender.callback = callback
				// 将sender的param赋值为param
				this.sender.param = param
			},
			// 处理圆形
			handleCircle(latlng, options, callback, param) {
				// 如果options是字符串类型
				if (typeof options == 'string') {
					// 将param赋值给callback
					param = callback
					// 将callback赋值给options
					callback = options
					// 将options赋值为undefined
					options = undefined
				}
				// 将sender的handle赋值为'circle'
				this.sender.handle = 'circle'
				// 将latlng赋值给sender的latlng
				this.sender.latlng = latlng
				// 将options赋值给sender的options
				this.sender.options = options
				// 将callback赋值给sender的callback
				this.sender.callback = callback
				// 将param赋值给sender的param
				this.sender.param = param
			},
			// 处理GeoJson
			handleGeoJson(geojson, options, callback, param) {
				// 将sender的handle赋值为'geoJson'
				this.sender.handle = 'geoJson'
				// 将geojson赋值给sender的latlng
				this.sender.latlng = geojson
				// 将options赋值给sender的options
				this.sender.options = options
				// 将callback赋值给sender的callback
				this.sender.callback = callback
				// 将param赋值给sender的param
				this.sender.param = param
			},
			// 处理TileLayerGroup
			handleTileLayerGroup(latlng, options) {
				// 将sender赋值为一个对象
				this.sender = {
					// 将handle赋值为'tileLayerGroup'
					handle: 'tileLayerGroup',
					// 将latlng赋值给latlng
					latlng: latlng,
					// 将options赋值给options
					options: options,
					// 将时间戳赋值给timeStamp
					timeStamp: (new Date()).getTime()
				}
			},
			// 处理标记图层组
			handleMarkerLayerGroup(latlng, options) {
				// 将处理标记图层组的信息存储到sender对象中
				this.sender = {
					// 处理类型
					handle: 'markerLayerGroup',
					// 经纬度
					latlng: latlng,
					// 选项
					options: options,
					// 时间戳
					timeStamp: (new Date()).getTime()
				}
			},
			// 处理折线图层组
			handlePolylineLayerGroup(latlng, options) {
				// 将处理折线图层组的信息存储到sender对象中
				this.sender = {
					// 处理类型
					handle: 'polylineLayerGroup',
					// 经纬度
					latlng: latlng,
					// 选项
					options: options
				}
			},
			// 处理多边形图层组
			handlePolygonLayerGroup(latlng, options) {
				// 将处理多边形图层组的信息存储到sender对象中
				this.sender = {
					// 处理类型
					handle: 'polygonLayerGroup',
					// 经纬度
					latlng: latlng,
					// 选项
					options: options
				}
			},
			// 处理圆形图层组
			handleCircleLayerGroup(latlng, options) {
				// 将处理函数、经纬度和选项存储在sender对象中
				this.sender = {
					handle: 'circleLayerGroup',
					latlng: latlng,
					options: options
				}
			},
			// 处理图形图层组
			handleGraphicalLayerGroup(latlng) {
				// 将处理函数、经纬度和时间戳存储在sender对象中
				this.sender = {
					handle: 'graphicalLayerGroup',
					latlng: latlng,
					timeStamp: (new Date()).getTime()
				}
			},
			// 处理底图切换
			handleChangeBaseLayer(latlng) {
				// 将处理函数和经纬度存储在sender对象的handle和latlng属性中
				this.sender.handle = 'changeBaseLayer'
				this.sender.latlng = latlng
			},
			// 处理平移
			handlePanTo(latlng, options) {
				// 将处理函数、经纬度和选项存储在sender对象的handle、latlng和options属性中
				this.sender.handle = 'panTo'
				this.sender.latlng = latlng
				this.sender.options = options
			},
			// 处理飞行
			handleFlyTo(latlng, options) {
				// 将处理函数、经纬度、选项和时间戳存储在sender对象中
				this.sender = {
					handle: 'flyTo',
					latlng: latlng,
					options: options,
					timeStamp: (new Date()).getTime()
				}
			},
			// 处理适应边界
			handleFitBounds(latlng) {
				// 将sender对象设置为适应边界
				this.sender = {
					handle: 'fitBounds',
					latlng: latlng,
					timeStamp: (new Date()).getTime()
				}
			},
			// 处理飞行边界
			handleFlyBounds(latlng) {
				// 将sender对象设置为飞行边界
				this.sender = {
					handle: 'flyBounds',
					latlng: latlng,
					timeStamp: (new Date()).getTime()
				}
			},
			// 处理设置缩放
			handleSetZoom(zoom, options) {
				// 将sender对象设置为设置缩放
				this.sender = {
					handle: 'setZoom',
					latlng: zoom,
					options: options,
					timeStamp: (new Date()).getTime()
				}
			},
			// 放大地图
			handleZoomIn() {
				// 设置sender对象，handle属性为'zoomIn'
				this.sender = {
					handle: 'zoomIn',
					// latlng属性为空对象
					latlng: {},
					// options属性为空对象
					options: {},
					// timeStamp属性为当前时间戳
					timeStamp: (new Date()).getTime()
				}
			},
			// 缩小地图
			handleZoomOut() {
				// 设置sender对象，handle属性为'zoomOut'
				this.sender = {
					handle: 'zoomOut',
					// latlng属性为空对象
					latlng: {},
					// options属性为空对象
					options: {},
					// timeStamp属性为当前时间戳
					timeStamp: (new Date()).getTime()
				}
			},
			// 获取地图中心点
			handleGetCenter(callback) {
				// 设置sender对象，handle属性为'getCenter'
				this.sender = {
					handle: 'getCenter',
					// latlng属性为空对象
					latlng: {},
					// options属性为空对象
					options: {},
					// callback属性为传入的回调函数
					callback
				}
			},
			// 获取缩放
			handleGetZoom() {
				// 将sender对象设置为getZoom，latlng和options为空，timeStamp为当前时间
				this.sender = {
					handle: 'getZoom',
					latlng: {},
					options: {},
					timeStamp: (new Date()).getTime()
				}
			},
			// 定位
			handleAim(latlng, options) {
				// 将sender对象设置为aim，latlng和options为传入的参数，timeStamp为当前时间
				this.sender = {
					handle: 'aim',
					latlng: latlng,
					options: options,
					timeStamp: (new Date()).getTime()
				}
			},
			// 移除所有
			handleRemoveAll() {
				// 将sender对象设置为removeAll，latlng和options为空，timeStamp为当前时间
				this.sender = {
					handle: 'removeAll',
					latlng: {},
					options: {},
					timeStamp: (new Date()).getTime()
				}
			},
			// 清除指定图层组
			handleClearLayerGroup(latlng, options) {
				// 将sender对象设置为clearLayerGroup，latlng和options为传入的参数
				this.sender = {
					handle: 'clearLayerGroup',
					latlng,
					options
				}
			},
			// 清除所有图层组
			handleClearAllLayerGroup(latlng, options) {
				this.sender = {
					handle: 'clearAllLayerGroup',
					latlng,
					options
				}
			},
			// 点击标记
			handleClickMarker(data) {
				bus.$emit('on-click-marker', data);
			}
		}
	}
</script>

<style lang="scss">
	.map-container-panel {
		width: 100%;
		z-index: 1;

		/deep/.leaflet-control-scale-line {
			background: rgba(255, 255, 255, 1);
		}

		/deep/.leaflet-control-scale {
			margin-bottom: 4upx;
			margin-right: 20upx;
		}
	}
</style>